<template>
  <div class="notice_news">
    <div style="padding: 10px 15px 0 15px;box-sizing: border-box;">
      <img style="width: 100%;" src="@/assets/img/tzfw_heade.png" alt="">
    </div>
    <van-search @update:model-value="onSearch" v-model="value" placeholder="请输入搜索关键词" />
    <div class="news_list">
      <skeleton-com v-if="showSkeleton" type="tzfw"></skeleton-com>
      <news-content v-else :show-swiper="false" @load="loadData" :loading="loading" :finished="finished"
                    :src="djywIconObj" :data="newsData"></news-content>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import newsContent from "@/components/newsContent/newsContent.vue";
import { INewsCommonRes, INewsRes, INewsResquestParam } from "../importantNews/type";
import { getNewsList } from "@/api/importantNews";
import djywIcon from '@/assets/img/user.png';
import useGetPaginationData from "../importantNews/useGetData";
import { debounce } from "@/util";
import skeletonCom from "@/components/skeletonCom/skeletonCom.vue";
const djywIconObj = djywIcon
const { newsData, getData, loading, finished, showSkeleton } = useGetPaginationData<INewsResquestParam, INewsCommonRes<INewsRes[]>, INewsRes>(getNewsList);
const params: INewsResquestParam = {
  token: '',
  page: 1,
  pageSize: 10,
  type: 'tzfw'
}
onMounted(() => {
  getData(params);
});
const onSearch = debounce((value: string) => {
  params.page = 1
  params.title = value
  getData(params);

}, 800)

function loadData() {
  params.page++
  getData(params)
}
const value = ref("");
const active = ref("1");



</script>
<style lang="less" scoped>
.news_list {
  padding: 0 17.2px;
}
</style>
